<template>
    <div class="chart" :style="{height: '300px',width: '800px'}"  style="border:1px solid black; margin: 0 auto;margin-top:20px"/>
</template>

<script>
import echarts from 'echarts'
import { getTodayTicketSales } from "@/api/bussiness/data";

export default {
  data() {
    return {
      chart: null,
      ajaxPieData: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getAjaxPieData()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
   methods: {
    getAjaxPieData(){
        getTodayTicketSales().then(res=>{
          this.ajaxPieData = res.data
          this.initChart()
        })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'light')

      this.chart.setOption({
      title: {
        text: '当日门票售卖情况',
        subtext: this.parseTime(new Date()),
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '当前数据',
          type: 'pie',
          radius: '50%',
          data: this.ajaxPieData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      })
    }
  }
};

</script>